const menu = document.querySelector(".menu");
const menuInner = menu.querySelector(".menu-inner");
const menuArrow = menu.querySelector(".menu-arrow");
const burger = document.querySelector(".burger");
const overlay = document.querySelector(".overlay");

// Navbar Menu Toggle Function
function toggleMenu() {
    menu.classList.toggle("is-active");
    overlay.classList.toggle("is-active");
}

// Show Mobile Submenu Function
function showSubMenu(children) {
    subMenu = children.querySelector(".submenu");
    subMenu.classList.add("is-active");
    subMenu.style.animation = "slideLeft 0.35s ease forwards";
    const menuTitle = children.querySelector("i").parentNode.childNodes[0]
        .textContent;
    menu.querySelector(".menu-title").textContent = menuTitle;
    menu.querySelector(".menu-header").classList.add("is-active");
}

// Hide Mobile Submenu Function
function hideSubMenu() {
    subMenu.style.animation = "slideRight 0.35s ease forwards";
    setTimeout(() => {
        subMenu.classList.remove("is-active");
    }, 300);

    menu.querySelector(".menu-title").textContent = "";
    menu.querySelector(".menu-header").classList.remove("is-active");
}

// Toggle Mobile Submenu Function
function toggleSubMenu(e) {
    if (!menu.classList.contains("is-active")) {
        return;
    }
    if (e.target.closest(".menu-dropdown")) {
        const children = e.target.closest(".menu-dropdown");
        showSubMenu(children);
    }
}

// Fixed Navbar Menu on Window Resize
window.addEventListener("resize", () => {
    if (window.innerWidth >= 992) {
        if (menu.classList.contains("is-active")) {
            toggleMenu();
        }
    }
});

// Dark and Light Mode with localStorage
(function() {
    let darkMode = localStorage.getItem("darkMode");
    const darkSwitch = document.getElementById("switch");

    // Enable and Disable Darkmode
    const enableDarkMode = () => {
        document.body.classList.add("darkmode");
        localStorage.setItem("darkMode", "enabled");
    };

    const disableDarkMode = () => {
        document.body.classList.remove("darkmode");
        localStorage.setItem("darkMode", null);
    };

    // User Already Enable Darkmode
    if (darkMode === "enabled") {
        enableDarkMode();
    }

    // User Clicks the Darkmode Toggle
    darkSwitch.addEventListener("click", () => {
        darkMode = localStorage.getItem("darkMode");
        if (darkMode !== "enabled") {
            enableDarkMode();
        } else {
            disableDarkMode();
        }
    });
})();

// Initialize All Event Listeners
burger.addEventListener("click", toggleMenu);
overlay.addEventListener("click", toggleMenu);
menuArrow.addEventListener("click", hideSubMenu);
menuInner.addEventListener("click", toggleSubMenu);

// 更换背景颜色
// 从localStorage中获取上次保存的模式状态
var isNightMode = localStorage.getItem('isNightMode') === 'true';

function toggleBackgroundColor() {
    // 切换模式
    isNightMode = !isNightMode;

    // 将当前模式状态保存到localStorage
    localStorage.setItem('isNightMode', isNightMode);

    // 获取所有具有指定类名的元素
    var elements = document.querySelectorAll('.color-change-element');

    // 遍历元素并切换类名
    elements.forEach(function(element) {
        element.classList.toggle('day-mode', !isNightMode);
        element.classList.toggle('night-mode', isNightMode);
    });
}

// 在页面加载时根据localStorage中的值设置初始颜色模式
document.addEventListener('DOMContentLoaded', function() {
    // 获取上次保存的模式状态
    var savedNightMode = localStorage.getItem('isNightMode');

    // 如果有保存的状态，则更新isNightMode
    if (savedNightMode !== null) {
        isNightMode = savedNightMode === 'true';

        // 根据模式状态设置初始颜色类名
        var elements = document.querySelectorAll('.color-change-element');
        elements.forEach(function(element) {
            element.classList.toggle('day-mode', !isNightMode);
            element.classList.toggle('night-mode', isNightMode);
        });
    }
});


// 中间分页
const pageButtons = document.querySelectorAll(".page-btn");
const pages = document.querySelectorAll(".page");

pageButtons.forEach((button) => {
    button.addEventListener("click", () => {
        // 首先移除所有页面和按钮的active类
        pageButtons.forEach((btn) => btn.classList.remove("active"));
        pages.forEach((page) => page.classList.remove("active"));

        // 添加当前按钮和页面的active类
        const pageNumber = button.dataset.page;
        button.classList.add("active");
        const selectedPage = document.querySelector(`.page[data-page="${pageNumber}"]`);
        selectedPage.classList.add("active");
    });
});

// 默认显示第一页
pageButtons[0].click();


// 标签分页
function switchPage(pageId) {
    // Get all pages
    let pages = document.getElementsByClassName('page1');

    // Hide all pages
    for (let i = 0; i < pages.length; i++) {
        pages[i].classList.remove('active');
    }

    // Show the page user wants to switch to
    let page = document.getElementById(pageId);
    page.classList.add('active');
}
// 显示访问网站次数
// 获取存储在 localStorage 中的访问次数
let visitCount = localStorage.getItem('visitCount') || 1;

// 更新显示访问次数
updateVisitCount(visitCount);

// 增加访问次数
visitCount++;

// 更新 localStorage
localStorage.setItem('visitCount', visitCount);

// 监听 Storage 事件，实现多页面同步
window.addEventListener('storage', function(event) {
    if (event.key === 'visitCount') {
        // 更新显示访问次数
        updateVisitCount(event.newValue);
    }
});

function updateVisitCount(count) {
    document.getElementById('visitCount').textContent = count;
}

// 显示二维码
function showQRCode() {
    document.getElementById('qrcode-container').style.display = 'block';
}

// 隐藏二维码
function hideQRCode() {
    document.getElementById('qrcode-container').style.display = 'none';
}

// 边框颜色
function generateBorderColors(numColors) {
    var letters = "0123456789ABCDEF";
    var colors = [];

    for (var i = 0; i < numColors; i++) {
        var color = "#";
        for (var j = 0; j < 6; j++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        colors.push(color);
    }

    return colors;
}

var elements = document.getElementsByClassName("myElement");
var borderColors = generateBorderColors(elements.length);

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    var borderColor = borderColors[i];
    element.style.borderColor = borderColor;
}